<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml"
      layout:decorate="~{front/common/framework}" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
  <title>用户中心_找回密码</title>
  <link rel="stylesheet" href="/static/front/css/findpwd.css">
</head>
<body>
<div layout:fragment="content">
  <div class="toper">
    <div class="wrapper">
      <h2>探索花瓣美素世界！</h2>
    </div>
  </div>

  <div class="wrapper con-wrapper">
    <div class="ui_h2">
      <h2 class="blk">找回密码</h2>
      <span class="ui_line black"></span>
    </div>


    <div class="pb150 center_wrap">
      <div class="wrapper">
        <div class="pin_wrap">
          <div class="head">
            <img src="/static/front/imgs/step01.png">
            <ul>
              <li class="selected">输入手机号</li>
              <li>验证身份</li>
              <li class="ls">设置新密码</li>
              <li class="la">修改成功</li>
            </ul>
          </div>
          <div class="mt80 body">
            <ul>


            </ul>
          </div>
          <div class="mt70 foot">
            <a href="javascript:void(0)" class="ui_btn">下一步</a>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<th:block layout:fragment="script">
  <script type="text/javascript">
    layui.use('layer', function () {
      var step = Util.getQueryString('step');

      switch (step){
        case 'second':
          var mobile = Util.getQueryString('mobile');
          $.getJSON('/account/findMobile',{mobile:mobile},function (result) {
            if(!result.success){
              var nonemobile = $('#mobile-none').html();
              $('.con-wrapper').html(nonemobile);
            }else{
              var secondstep = $('#second-step').html();
              $('.pin_wrap .body ul').html(secondstep);
              $('.pin_wrap .head img').attr('src','/static/front/imgs/step02.png')
              $('.pin_wrap .head ul li').eq(1).addClass('selected').siblings().removeClass('selected')
              $('#paswtel').val(mobile);
              $('#getcodepasw').click(function () {
                var token = Util.nuid(),
                    mobile = $('#paswtel').val()
                $('#token').val(token);
                $.getJSON('/account/sendFindPwdSms',{token:token,mobile:mobile},function (result) {
                  if(result.success){
                    layer.msg('发送成功');
                  }
                })
              })
              
              $('.ui_btn').click(function () {
                var randomcode = $('#paswcode').val(),
                    mobile = $('#paswtel').val(),
                    token = $("#token").val();
                if(randomcode.length!=6){
                  layer.msg('请输入6位纯数字验证码');
                  return false;
                }
                localStorage.setItem('mobile',mobile);
                localStorage.setItem('verifyCode',randomcode);
                localStorage.setItem('token',token);
                location.href = '/findpwd?step=third'
              })
            }
          })
          break;
        case 'third':
          var mobile = localStorage.getItem('mobile'),
              verifyCode = localStorage.getItem('verifyCode'),
              token = localStorage.getItem('token');
          if(!mobile||!verifyCode||!token){
            return false;
          }

          $.post('/account/verifySmsCode',{token:token,randomCode:verifyCode},function (result) {
            if(result.success){
              var thirdstep = $('#third-step').html();
              $('.pin_wrap .body ul').html(thirdstep);
              $('.pin_wrap .head img').attr('src','/static/front/imgs/step03.png')
              $('.pin_wrap .head ul li').eq(2).addClass('selected').siblings().removeClass('selected')
              $('#mobile').val(mobile);
              $('.ui_btn').html('提交修改').click(function () {
                var pwd = $('#newpas').val(),
                    cpwd = $('#newpasre').val(),
                    mobile = $('#mobile').val();
                if (pwd.left<6){
                  layer.msg('密码长度至少为6位');
                  return false;
                }
                if(pwd!=cpwd){
                  layer.msg('密码和确认密码不一致');
                  return false;
                }

                $.post('/account/resetPassword',{mobile:mobile,password:pwd},function (result) {
                  if(result.success){
                    location.href = '/findpwd?step=fourth'
                  }
                },'json')

              })
            }else{
              var errorverifycode = $('#error-verify-code').html();
              $('.con-wrapper').html(errorverifycode);
            }
          },'json')
          localStorage.removeItem('mobile');
          localStorage.removeItem('verifyCode');
          localStorage.removeItem('token');
          break;
        case 'fourth':
          var fourthstep =  $('#fourth-step').html();
          $('.pin_wrap .body').html(fourthstep);
          $('.pin_wrap .head img').attr('src','/static/front/imgs/step04.png')
          $('.pin_wrap .head ul li').eq(3).addClass('selected').siblings().removeClass('selected')
          $('.ui_btn').html('立即登录').click(function () {
            location.href='/login';
          })
          break;
        default:
          var firstep =  $('#first-step').html();
          $('.pin_wrap .body ul').html(firstep);
          $('.ui_btn').click(function () {
            var mobile = $('input[name="mobile"]').val();
            if(mobile==''){
              layer.msg('请输入手机号码')
              return false;
            }
            location.href = '/findpwd?step=second&mobile='+mobile;
          });
      }

    })
  </script>

  <script type="text/html" id="first-step">
    <li>
      <label>手机号</label>
      <input type="text" class="tx" name="mobile" id="smsgettel" value="">
    </li>
  </script>

  <script type="text/html" id="second-step">
    <li>
      <label>手机验证码</label>
      <input type="hidden" class="tx tx02" name="paswtel" id="paswtel" value="">
      <input type="hidden" class="tx tx02" name="token" id="token" value="">
      <input type="text" class="tx tx02" name="paswcode" id="paswcode" value="" placeholder="输入手机验证码">
      <input type="button" name="" id="getcodepasw" class="btn" value="获取验证码">
    </li>
  </script>

  <script type="text/html" id="third-step">
    <li>
      <label>新密码</label>
      <input type="hidden" class="tx" name="mobile" id="mobile" value="">
      <input type="password" class="tx" name="newpas" id="newpas" value="" placeholder="请设置你的新密码，长度为6-21字符">
    </li>
    <li>
      <label>重复新密码</label>
      <input type="password" class="tx" name="newpasre" id="newpasre" value="" placeholder="请再次输入你的新密码，长度为6-21字符">
    </li>
  </script>

  <script type="text/html" id="fourth-step">
    <p>密码重置成功，请牢记您的新密码！</p>
  </script>

  <script type="text/html" id="mobile-none">
    <div class="exit_bd">
      <div class="img">
        <img src="/static/front/imgs/success.png" alt="">
      </div>
      <div class="txt">
        <h2>手机号未注册</h2>
      </div>
      <div class="botton">
        <ul>
          <li><a href="/findpwd">重新找回</a></li>
        </ul>
      </div>
    </div>
  </script>

  <script type="text/html" id="error-verify-code">
    <div class="exit_bd">
      <div class="img">
        <img src="/static/front/imgs/ico70.png" alt="">
      </div>
      <div class="txt">
        <h2>短信验证码错误</h2>
      </div>
      <div class="botton">
        <ul>
          <li><a href="/findpwd">重新找回</a></li>
        </ul>
      </div>
    </div>
  </script>

</th:block>
</body>
</html>